import React from 'react';
import 'react-chat-elements/dist/main.css';
import { Avatar, MessageBox } from 'react-chat-elements';
import _ from 'lodash';
import styles from './MessageItem.less';

class MessageItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const { color, position, content, type, avatar, time } = this.props;
    return (<div className={styles.messageItem}>
    { content &&
      (<div>
        <Avatar
          src={avatar}
          size="large"
          type="circle"
          className={{leftAvatar: position === 'left', rightAvatar: position === 'right'}}
        />
        <MessageBox
          className={{ yellowBox: color === 'yellow', blueBox: color === 'blue' }}
          position={position}
          title={content}
          type={type}
        />
      </div>)
      }
    </div>);
  }
}

MessageItem.propTypes = {
  color: React.PropTypes.oneOf(['yellow', 'blue']),
  type: React.PropTypes.string,
  position: React.PropTypes.string,
  content: React.PropTypes.string,
  time: React.PropTypes.string,
  avatar: React.PropTypes.string,
};

MessageItem.defaultProps = {
  color: 'yellow',
  position: 'left',
  type: 'text',
};

export default MessageItem;
